<template>
    <div>
      <h2>车辆筛选</h2>
      <div>
        <label>地址：</label>
        <!-- <input type="text" v-model="filter.address" /> -->
        <el-select v-model="filter.address" placeholder="请选择">
        <el-option
         v-for="item in options"
        :key="item.value"
        :address="item.address"
        :value="item.filter.address">
    </el-option>
  </el-select>
      </div>
      <div>
        <label>颜色：</label>
        <input type="text" v-model="filter.color" />
      </div>
      <button @click="applyFilter">筛选</button>
      <ul>
        <li v-for="car in filteredCars" :key="car.id">
          {{ car.brand }} - {{ car.model }} - {{ car.color }} - {{ car.address }}
        </li>
      </ul>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        options:[{
            value:'1',
            address:'你家'
        }],

        filter: {
          address: '',
          color: ''
        },
        cars: [
          { id: 1, brand: 'Toyota', model: 'Camry', color: 'Red', address: '123 Main St' },
          { id: 2, brand: 'Honda', model: 'Civic', color: 'Blue', address: '456 Elm St' },
          { id: 3, brand: 'Ford', model: 'Mustang', color: 'Yellow', address: '789 Oak St' }
        ]
      };
    },
    computed: {
      filteredCars() {
        const { address, color } = this.filter;
        return this.cars.filter(car => {
          return (
            (address === '' || car.address.toLowerCase().includes(address.toLowerCase())) &&
            (color === '' || car.color.toLowerCase().includes(color.toLowerCase()))
          );
        });
      }
    },
    methods: {
      applyFilter() {
        // 应用筛选逻辑，更新filteredCars
      }
    }
  };
  </script>
  